今天然大爆炸，內心突然陰暗，
專案還沒看到頭，下一個已經排好等著了
草...又我...
小夥伴...為什麼可以這麼快樂，
快樂的等著出國去旅遊，順手改改寫鐵人賽文章...
沒有專案，沒有開會，沒有壓力
而我...
趕專案=>午休寫鐵人賽文章 =>繼續趕專案=>加班趕專案加準備下拜一開會資料=>寫鐵人賽文章

我覺得自己要過勞了，明明同天一起進公司T_T
甚麼時候才能像他體會到沒有專案圍繞的快樂，
我一點也不想被太看得起，我只想當鹹魚

今天睜開眼，我在思考...要不擺爛吧?
明明文件很爛，明明後端給的api根本打不到，
一直被拖工期，串接只能盲改，
工期只剩一半，文件格式還是錯的，
參數名稱沒統一規格，
一下全大寫，一下大寫駝峰，一下大寫加底線，
就連簡單的傳給後端的日期格式都沒搞定，

待確認項目欄位永遠是空白的，
封面的更新日期有一直刷新，
但是更改紀錄永遠停在上個月的某一天，
然後另一份就更過分了，
敘述錯的截圖錯的(只有小小一行待補)，
帳號權限空白，
然後一個禮拜過後跟我說...這份~不、會、再、更、新、囉~

而前端卻工期沒延長，還一直縮短工期，
正在苦思為什麼無法打api登入，
後端說 喔，登入task沒被安排阿...
登入task沒被安排阿...
登入task沒被安排阿...

這是正常的TEAM能做得出來的事?

要是知道這裡的SA這麼好當，
當初去面SA也不錯

還是因為前端比較低端?
拿來壓的?

我另一半說其實說職場鬼故事，
說不定都比寫這類文章還受歡迎

好了...扯遠了....

如果有寫ts 應該會發現官方文件有點錯誤
interface的部分

interface Country {
    name: string;
    code: string;
}

interface Representative {
    name: string;
    image: string;//如果引用官方資料應該將code改為image
}

export interface Customer {
    id: number;
    name: string;
    country: Country;
    company: string;
    date: string;
    status: string;
    verified: boolean;
    activity: number;
    representative: Representative;
    balance: number;
}

引入資料跟元件以及interface

import { DataTable, DataTableExpandedRows } from 'primereact/datatable';
import { Column } from 'primereact/column';
import { CustomerService } from '../service/custom';
import { Customer } from '../interfaces/table';

Table6.tsx

import React, { useEffect, useState } from 'react';
import { DataTable, DataTableExpandedRows } from 'primereact/datatable';
import { Column } from 'primereact/column';
import { CustomerService } from '../service/custom';
import { Customer } from '../interfaces/table';
const Tables6Compnent: React.FC = () => {
  const [customers, setCustomers] = useState<Customer[]>([]);
  const [expandedRows, setExpandedRows] = useState<DataTableExpandedRows | Customer[]>([]);

  useEffect(() => {
    CustomerService.getCustomersMedium().then((data) => setCustomers(data));
  }, []);

  const headerTemplate = (data: Customer) => {
    return (
      <React.Fragment>
        <img alt={data.representative.name} src={`https://primefaces.org/cdn/primereact/images/avatar/${data.representative.image}`} width="32" style={{ verticalAlign: 'middle' }} className="ml-2" />
        <span className="ml-2">{data.representative.name}</span>
      </React.Fragment>
    );
  };

  const footerTemplate = (data: Customer) => {
    return (
      <React.Fragment>
        <td colSpan={5}>
          <div className="d-flex justify-content-end" >Total Customers: {calculateCustomerTotal(data.representative.name)}</div>
        </td>
      </React.Fragment>
    );
  };

  const countryBodyTemplate = (rowData: Customer) => {
    return (
      <div className="d-flex align-items-center">
        <span>{rowData.country.name}</span>
      </div>
    );
  };

  const calculateCustomerTotal = (name: string) => {
    let total = 0;
    if (customers) {
      for (let customer of customers) {
        if (customer.representative.name === name) {
          total++;
        }
      }
    }
    return total;
  };

  return (
    <div>
      <DataTable value={customers} rowGroupMode="subheader" groupRowsBy="representative.name"
        sortMode="single" sortField="representative.name"
        expandableRowGroups expandedRows={expandedRows} onRowToggle={(e) => setExpandedRows(e.data)}
        rowGroupHeaderTemplate={headerTemplate} rowGroupFooterTemplate={footerTemplate} >
        <Column field="name" header="Name" />
        <Column field="country.name" header="Country" />
        <Column field="company" header="Company" />
      </DataTable>
    </div>

  );
}
export default Tables6Compnent;

rowGroupMode rowgroup顯示樣式
-> subheader 以groupRowsBy為header 群組內資料為 subheader顯示
如果覺得subheader資料太多可以用expandableRowGroups 進行收合

-> rowspan 將groupRowsBy設定的欄位進行群組合併

groupRowsBy
希望群組的項目

sortField
如果來源的資料原本沒有依照自己希望的groupRowsBy的設定依序創建，
就要記得進行排序

※切記要連貫，否則會失效

好了row group就介紹到這